<!--近期最受欢迎的组件 -->
<template>
	<div class="mv-most-expected">
		<h1>近期最受欢迎</h1>
		<!-- 滚动列表开始 -->
		<div id="scroll">
			<ul>
				<li v-for="li in expectedList">
					<img :src="li.img" alt="" />
					<h2>{{ li.nm }}</h2>
					<h3>{{ li.wish }}人想看</h3>
					<h3>{{ li.comingTitle }}</h3>
				</li>
			</ul>
		</div>
		<!-- 滚动列表结束 -->
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import axios from '@/api/instance';
import BetterScroll from 'better-scroll';
export default {
	//import引入的组件需要注入到对象中才能使用
	components: {},
	data() {
		//这里存放数据
		return {
			expectedList: [], // 存放近期最受欢迎列表的数据
		};
	},
	//监听属性 类似于data概念
	computed: {},
	//监控data中的数据变化
	watch: {},
	//方法集合
	methods: {
		// 用来加载列表的数据
		async loadData() {
			// 修改加载数据的状态，防止多次请求
			this.loaded = false;
			let result = await axios.get('/mostExpected.json');
			// console.log('近期最受欢迎数据：', result);
			// 追加
			this.hasMore = !!result?.paging?.hasMore;
			this.expectedList = [...this.expectedList, ...result.coming];
			this.loaded = true;
		},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {
		// this => MostExpected 组件 => 对象
		//
		this.offset = 0;
		this.limit = 10;
		this.loaded = false;
	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	async mounted() {
		await this.loadData();
		// 等待子元素結構生成
		await this.$nextTick(); // 待會介紹這個作用
		// 使用 better-scroll 初始化元素
		let bscroll = new BetterScroll('#scroll', {
			scrollX: true,
		});
		console.log(this); // MostExptected
		// 注册滚动停止的时候，加载更多的数据
		// bscroll.on('scrollEnd', () => {
		// 	console.log('滚动结束了');
		// 	// 加载数据
		// 	console.log(this);
		// });
		// 注意，回调函数这一部分我们不是使用箭头函数去写
		let that = this;
		bscroll.on('scrollEnd', async function ({ x }) {
			console.log('x 轴滚动的距离:', x);
			console.log('scrollEnd:', this);
			console.log(this.maxScrollX);
			// 加载数据
			// await that.loadData();
			// 重新让新的DOM 可以滚动
			// this.refresh();
			// -1 -2
			// 1< 2
			if (x <= this.maxScrollX && that.loaded && that.hasMore) {
				console.log('滚动到右边触底');
				await that.loadData();
				// 重新让新的DOM 可以滚动
				this.refresh();
			}
		});
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
@import url('@/assets/ellipsis.less');
.mv-most-expected {
	margin: 0 0.15rem;
	h1 {
		padding: 0.15rem 0.15rem 0.15rem 0;
		font-size: 0.18rem;
		font-weight: normal;
	}
	#scroll {
		ul {
			display: flex;
			width: max-content;
			li {
				width: 0.85rem;
				margin-right: 0.15rem;
				img {
					width: 0.85rem;
					height: 1.1rem;
				}
				h2 {
					.ellipsis(100%);
					font-size: 0.16rem;
					line-height: 0.3rem;
				}

				h3 {
					.ellipsis(100%);
					color: #666;
				}
			}
		}
	}
}
</style>
